<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>支付</title>
    <!--引入vue.js库-->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="/js/vue.js"></script>
    <!--vue提供的生成二维码的组件-->
    <script src="/js/vue-qriously.js"></script>
    <!-- element-ui引入样式 展示数据的-->
    <link rel="stylesheet" href="/css/index.css">
    <!-- element-ui引入组件库 -->
    <script src="/js/index.js"></script>
    <!--引入axios库  从后端获取数据-->
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="/js/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <button @click="toPay">立即支付</button>
                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                        :before-close="handleClose">
                    <!--存放二维码的区域-->
                    <div>支付的金额:￥{{order.money}}元</div>
                    <div>订单的状态:{{paystatus}}</div>
                    <qriously v-if="code_url!=''" :value="code_url" :size="338"/>
                </el-dialog>
    </div>
    <script>
        //js代码
        var vue = new Vue({
            el: "#app",
            data() { //存放使用的所有属性数据
                return { //方便编写表单校验
                    dialogVisible:false,
                    code_url:"",
                    paystatus:"",
                    timer1:"",
                    order:{
                        money:0.01,
                        orderNum:"",
                        describe:"百度红尘",
                    }
                }
            },
            created: function () {//页面初始化时，需要执行的业务可以放入该方法
                //    setInterval   每隔3秒执行    this.queryPayStatus 查看支付是否成功 状态
                //   setTimeout(function1,10000); 10秒后执行函数function1
                this.timer1=setInterval(()=>{
                    this.queryPayStatus(this.order.orderNum);
                },3000)
            },
            methods: {
                //去支付，生成二维码
                 toPay(){
                  //  alert(111);
                    //2021：12：12：12.900   //new Date().getTime() 获取当前时间戳  （1970-1-1 00:00:00 000 到当前时间的毫秒数）
                    this.order.orderNum="aaa"+new Date().getTime();
                    var _this = this;
                    //获取code_url
                     axios.post("/pay/getNativeCodeUrl",_this.order)
                        .then(function (response) {
                     //       alert(JSON.stringify(response.data));
                            _this.code_url=response.data.data.code_url;
                        //    alert(_this.code_url);
                            _this.dialogVisible=true;
                        })

                },
                //获取支付是否成功状态
                queryPayStatus(ordernum) {
                    var _this = this;
                    axios.get("/pay/getPayStatus/" + ordernum)
                        .then(function (response) {
                            //注意  trade_state_desc不能随便写，这是微信平台返回给我们的
                            _this.paystatus = response.data.data.trade_state_desc;
                            if (_this.paystatus == "支付成功") {
                                _this.dialogVisible = false;
                                //清除定时任务  不让每3秒再执行
                                clearInterval(_this.timer1);
                            }
                        })
                },
                handleClose(done) {
                    this.$confirm('确认关闭？')
                        .then(_ => {
                            done();
                        })
                        .catch(_ => {});
                }
            }
        })
    </script>
</body>
</html>